<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/igrid/validateFunction.js" charset="utf-8"></script>
<style type="text/css">
h5{font-size: 13px; font-weight: normal; line-height: 23px; float: right;}
h6{font-size: 13px; color: red; float: left; line-height: 13px;}
.showClew{font-size: 12px; color: olive;}
.showClew span{color: peru;}
.spanShow{color: peru;}
</style>
<div id="validateFunctionDemo">
	<!-- API区 -->
	<div title='API' tabid='tab1'><br />
		<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#api1')">1.IGrid内置验证器rule属性配置表</a></h2>
		<div style="display:none" id="api1">
			<form class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>
					<li class="ccay-form-row">
						<samp><h3>相关API</h3></samp>
						<span class="ccay-form-input"><h3 style="float: left;">描述</h3><h5><a onclick="Ccay.example.ui.igrid.validateFunction.openDemo('tab2');">点击查看Demo</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="required"></samp>	
						<span class="ccay-form-input">{Boolean} 设置该列是否是必填项</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="digits"></samp>	
						<span class="ccay-form-input">{Boolean} 设置该列是否是正整数</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="number"></samp>	
						<span class="ccay-form-input">{Boolean} 设置该列是否是数字</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="date"></samp>	
						<span class="ccay-form-input">{Boolean} 设置该列是否是日期</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="dateISO"></samp>	
						<span class="ccay-form-input">{Boolean} 设置该列是否是国际化标准的日期时分秒格式</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="datetime"></samp>	
						<span class="ccay-form-input">{Boolean} 设置该列是否是日期时分格式</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="min"></samp>	
						<span class="ccay-form-input">{Number} 设置该列的最小值</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="max"></samp>	
						<span class="ccay-form-input">{Number} 设置该列的最大值</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="minlength"></samp>	
						<span class="ccay-form-input">{Number} 设置该列字符的最小长度数</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="maxlength"></samp>	
						<span class="ccay-form-input">{Number} 设置该列字符的最大长度数</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="range"></samp>	
						<span class="ccay-form-input">{Number} 设置该列的值范围</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="rangelength"></samp>	
						<span class="ccay-form-input">{Number} 设置该列的字符长度范围</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="email"></samp>	
						<span class="ccay-form-input">{Boolean} 设置该列是否是邮箱格式</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="url"></samp>	
						<span class="ccay-form-input">{Boolean} 设置该列是否是链接格式</span>	
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="accept"></samp>	
						<span class="ccay-form-input">{String} 设置该列验证相同后缀名的字符串</span>	
					</li>
				</ul>
			</div>
			</form>
		</div><br />
		
		<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#api2')">2.IGrid自定义验证器配置表</a></h2>
		<div style="display:none" id="api2">
			<form class="init ccay-form longtitle">
			<div class="ccay-form-body ccay-form-custom">
				<ul>
					<li class="ccay-form-row">
						<samp><h3>相关API</h3></samp>
						<span class="ccay-form-input"><h3 style="float: left;">描述</h3><h5><a onclick="Ccay.example.ui.igrid.validateFunction.openDemo('tab3');">点击查看Demo</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="$.validator.addMethod(name,method,message)"></samp>
						<span class="ccay-form-input">添加一个新的验证方法。必须包括一个独一无二的名字，一个javaScript的方法和一个默认的信息。
							<h6>示例：$.validator.addMethod("name", function(value,element,param){return value?true:false;}, "prompt for summary info!")</h6><br><br>
							参数配置如下：
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="name"></samp>	
										<span class="ccay-form-input">{String} 添加验证的方法的名字</span>	
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="method"></samp>	
										<span class="ccay-form-input">{Function} 设置验证的方法函数，接收三个参数：<br>
											value：元素的值<br>element：元素本身<br>param：参数，如果只有一个参数，直接写，例如：name:"a"；如果多个参数，用在[]里，用逗号分开，例如：name:["a", "z"]
										</span>	
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="message"></samp>	
										<span class="ccay-form-input">{String} 设置验证方法的自定义的错误提示</span>	
			                		</li>
			                	</ul>
			                </div>
						</span>
					</li>
				</ul>
			</div>
			</form>
		</div>
		
	</div>
	
	<!-- Demo区 -->
	<div title='IGrid内置验证器' tabid='tab2'>
		<span class="showClew">备注：IGrid内置验证器功能Demo介绍常用的内置的13种编辑器类型，如不设置rule属性，则默认根据type属性进行验证</span><br /><br />
	 	<div id="iStudent1"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
	  		<pre id='html1'>&lt;div id="igridDemo1">&lt;/div></pre>
	  	</div>
	  	<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js1'>
//<span class="showClew"> IGrid静态数据源</span>      		
var gridData = [
	{required: "布丁", digits: 23, number: 23.3, range: 29.8, date: "2012-11-11", datetime: "2012-11-11 12:02:00", accept: "xx.jpg", email: "q@q.c", url: "w.com"},
	{required: "沙沙", digits: 22, number: 236.6, range: 900, date: "2012-12-21", datetime: "2012-11-11 12:05:00", accept: "xx.png", email: "q@qqcom", url: "http://www.com"},
	{required: "果冻", digits: 23, number: 23.3, range: 29.8, date: "2012-11-11", datetime: "2012-11-11 12:12:00", accept: "xx.jpg", email: "q@q.c", url: "w.com"},
	{required: "", digits: 22, number: 236.6, range: 900, date: "2012-12-21", datetime: "2012-11-11 12:56:00", accept: "xx.png", email: "q@qqcom", url: "http://www.com"}
];

var gridParam1 = {
	height: 300,
	editMode: true,
	wrap:true,
	//<span class="showClew"> weakValid:true 开启弱验证</span>
	weakValid:true,
	columns: [
		//<span class="showClew"> rule: {required: true}设置该列为必填项</span>
		{field: 'required', width:80, header: "required", rule: {required: true}},
		
		//<span class="showClew"> type: 'integer'根据type设置该列为正整数，或者rule: {digits: true}设置该列为正整数</span>
		{field: 'digits', width:70, header: "digits", type: 'integer'},
		
		//<span class="showClew"> type: 'number'根据type设置该列为数字，或者rule: {number: true}设置该列为数字；rule: {min: 30, max:90}设置该列最小值是30，最大值是90</span>
		{field: 'number', width:120, header: "number/min/max", type: 'number', rule: {min: 30, max:90}},
		
		//<span class="showClew"> rule: {range: [40, 80]}设置该列值范围是40到80</span>
		{field: 'range', width:70, header: "range", type: 'number', rule: {range: [40, 80]}},
		
		//<span class="showClew"> type: 'date'根据type设置该列是日期格式，或者rule: {date: true}设置该列是日期格式</span>
		{field: 'date', width:100, header: "date", type: 'date'},
		
		//<span class="showClew"> type: 'datetime'根据type设置该列是日期时分秒格式，或者rule: {datetime: true}设置该列是日期时分秒格式</span>
		{field: 'datetime', width:140, header: "datetime/dateHM", type: 'datetime'},

		//<span class="showClew"> ule: {accept: "jpg"}设置该列的后缀是"jpg"</span>
		{field: 'accept', width:130, header: "accept", rule: {accept: "jpg"}},
		
		//<span class="showClew"> rule: {email: true, rangelength: [6, 30]}设置该列是邮箱格式，字符长度范围是6到30</span>
		{field: 'email', width:130, header: "email/rangelength", rule: {email: true, rangelength: [6, 30]}},
		
		//<span class="showClew"> rule: {url: true, minlength: 11, maxlength: 50}设置该列是链接格式，字符最小长度是11，最大长度是50</span>
		{field: 'url', width:170, header: "url/minlength/maxlength", type: "textarea", rule: {url: true, minlength: 11, maxlength: 50}}
	]
};
		
$("#igridDemo1").igrid(gridParam1, gridData);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#validateFunctionDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
		</div>
	</div>
	
	<div title='IGrid自定义验证器' tabid='tab3'>
		<span class="showClew">备注：IGrid自定义验证器功能Demo，通常验证器显示和自定义验证器显示的对比</span><br /><br />
		<h4><span>实例1</span></h4>
	 	<div id="iStudent2"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
	  		<pre id='html2'>&lt;div id="igridDemo2">&lt;/div></pre>
	  	</div>
	  	<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js2'>
var gridParam2 = {
	height: 150,
	editMode: true,
	showPager: false,
	wrap:true,
	columns: [
	 {field: 'name', width: 120, header: "required(normal)", rule: {required: true}},
	 
	 //<span class="showClew"> customRequired为自定义验证器名称，若是必填的自定义验证，必须使用customRequired为自定义验证器名称，其他验证无所谓</span>
	{field: 'mail', width: 140, header: "required(valid)",  rule: {customRequired: function (value, ruleParams,context) {
					return value ? true : "自定义验证：不为空";
					
				}}}
	],
	ajax:{
		url: 'services/ccay/demo/student/list/page/15/1/${orderBy}'
	}
};
		
$("#igridDemo2").igrid(gridParam2);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#validateFunctionDemo',$('#js2').html(),$('#html2').html())">亲自试一试</a>
		</div>
		<h4><span>实例2</span></h4>
		<div id="iStudent3"></div>
		<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
	  		<pre id='html3'>&lt;div id="igridDemo3">&lt;/div></pre>
	  	</div>
				<h3>js Code</h3>
				<div class='codeArea'>
					<pre id='js3'>
        //<span class="showClew">自定义的验证方法</span>
        $.validator.addMethod("customFunc", function(value, element, params){
			    return (value == 1) ? true : false;
		     }, "与自定义验证不符");
		
		var gridParam3 = {
			height: 150,
			editMode: true,
			showPager: false,
			wrap:true,
		    columns: [
		 		{field: 'name', width: 140, header: "required(normal)", rule: {required:true}},
		 		//<span class="showClew">在列中指定自定义方法 customFunc:true</span>
				{field: 'mail', width: 140, header: "required(valid)",  rule: {required:true,customFunc:true}}
		    ],
			ajax:{
			   	url: 'services/ccay/demo/student/list/page/15/1/${orderBy}'
			}
		};  
		$("#igridDemo3").igrid(gridParam3);
    </pre>
				</div>
				<div class="try">
			<a onclick="Ccay.example.openTry('#validateFunctionDemo',$('#js3').html(),$('#html3').html())">亲自试一试</a>
		</div>
	</div>
	 
	<!-- Try区 -->
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:250px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	
	<!-- FAQ区 -->
	<div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
	
</div>